<!DOCTYPE html>
<html>
<head>
    <html lang="ch">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淘方案</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

<body>
    
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-sm bg-dark fixed-top " >

        <!-- 左侧导航栏 用来摆放Logo-->
        <ul class="navbar-nav  " style="padding-left: 50px">
            <li class="nav-item">
                <a class="btn nav-link" href="../index.html"><span class="text-white" ><strong>淘方案</strong></span></a>   
            </li>
        </ul>

        <!-- 中间导航栏  用来放置发现,消息,搜索框-->
        <div class="collapse navbar-collapse " style="padding-left: 75px">
            <ul class="navbar-nav ">
                <li class="nav-item">
                    <a class=" btn nav-link " href="#"><span class="text-white" >发现</span></a>   
                </li>
                <li class="nav-item">
                    
                    <a class="btn nav-link text-white" href="#">消息 <span class="badge badge-danger">4</span></a>
                    
                </li>
            </ul>

            <!-- 搜索框 -->
            <div style="padding-left: 15px"> <input class="form-control" type="text" placeholder="Search"> </div>
            <button class="btn btn-success" type="button">Search</button>
        </div>
        

        <!-- 右侧导航栏 用户头像以及下拉框-->
        <div class="collapse navbar-collapse justify-content-end" >
            <ul class="navbar-nav " >
                <li class="nav-item ">
                    <div class="dropdown" style="width: 150px">
                        <a class="btn text-white dropdown-toggle" data-toggle="dropdown">
                            Koga
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item text-dark" href="../index.html">我的主页</a>
                            <a class="dropdown-item text-dark" href="../HTML/account.html">账户资料</a>
                            <a class="dropdown-item text-dark" href="../HTML/collect.html">我的收藏</a>
                            <a class="dropdown-item text-dark" href="../HTML/Sign_out.html">注销</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>              
    </nav>

    <!-- 主体部分 -->
    <div class="container" style="margin-top: 155px"	>
        <div class="row">

            <!-- 调整间距 -->
            <div class="col-1"></div>

            <div class="col-10 " >

                <!-- 标题 -->
                <div class="row">
                    <h2>收藏</h2>
                </div>

                <!-- 内容 -->
                <div class="row">
                    <!-- 第一行 -->
                    <div class="col-12" style="padding-left: 0px">
                            <ul class="list-group">
                            <li class="list-group-item border-right-0 border-bottom-0 border-left-0 rounded-0"style="padding-left: 0px">
                                <div class="row">
                                    <div class="col-9" >
                                        <h5 class="card-title " style="margin-top: 10px "><strong>世平集团基于 NXP 的汽车调频 PKE 无钥匙门禁系统解决方案 P16-062</strong></h5>
                                        <p class="card-text text-secondary">Some example text some example text. John Doe is an architect and engineer</p>
                                        <a href="../HTML/Automotive/all.html" class="text-secondary  btn btn-sm" style="padding-left: 0px">Automotive2 </a>
                                        <a href="#" class="text-secondary  btn btn-sm">评论</a>
                                        <a href="#" class="text-secondary  btn btn-sm ">收藏</a>
                                        <a href="#" class="text-secondary  btn btn-sm ">分享</a>
                                    </div>
                                    <div class="col-3">
                                        <img class="img-fluid" src="../Picture/Auto.JPG" alt="Card image" style=" float: right;width: 126px;;height: 125px"> 
                                    </div>
                                </div>
                            </li>
                    </div>

                    <!-- 第二行 -->
                    <div class="col-12" style="padding-left: 0px">
                    <ul class="list-group">
                    <li class="list-group-item border-right-0 border-bottom-0 border-left-0 rounded-0"style="padding-left: 0px">
                        <div class="row">
                            <div class="col-9">
                                <h5 class="card-title " style="margin-top: 10px "><strong>世平集团基于 NXP 的汽车调频 PKE 无钥匙门禁系统解决方案 P16-062</strong></h5>
                                <p class="card-text text-secondary">Some example text some example text. John Doe is an architect and engineer</p>
                                <a href="../HTML/IoT/all.html" class="text-secondary  btn btn-sm" style="padding-left: 0px">IoT2</a>
                                <a href="#" class="text-secondary  btn btn-sm">评论</a>
                                <a href="#" class="text-secondary  btn btn-sm ">收藏</a>
                                <a href="#" class="text-secondary  btn btn-sm ">分享</a>
                            </div>
                            <div class="col-3">
                                <img class="img-fluid" src="../Picture/IoT.JPG" alt="Card image" style=" float: right;width: 126px;;height: 125px"> 
                            </div>
                        </div>
                    </li>
                    </div>

                    <!-- 第三行 -->
                    <div class="col-12" style="padding-left: 0px">
                    <ul class="list-group">
                    <li class="list-group-item border-right-0 border-bottom-0 border-left-0 rounded-0"style="padding-left: 0px">
                        <div class="row">
                            <div class="col-9">
                                <h5 class="card-title " style="margin-top: 10px "><strong>世平集团基于 NXP 的汽车调频 PKE 无钥匙门禁系统解决方案 P16-062</strong></h5>
                                <p class="card-text text-secondary">Some example text some example text. John Doe is an architect and engineer</p>
                                <a href="../HTML/Industry/all.html" class="text-secondary  btn btn-sm" style="padding-left: 0px">Industry2</a>
                                <a href="#" class="text-secondary  btn btn-sm">评论</a>
                                <a href="#" class="text-secondary  btn btn-sm ">收藏</a>
                                <a href="#" class="text-secondary  btn btn-sm ">分享</a>
                            </div>
                            <div class="col-3">
                                <img class="img-fluid" src="../Picture/Industry.JPG" alt="Card image" style=" float: right;width: 126px;;height: 125px"> 
                            </div>
                        </div>
                    </li>
                    </div>

                    <!-- 第四行 -->
                    <div class="col-12" style="padding-left: 0px">
                    <ul class="list-group">
                    <li class="list-group-item border-right-0 border-bottom-0 border-left-0 rounded-0"style="padding-left: 0px">
                        <div class="row">
                            <div class="col-9">
                                <h5 class="card-title " style="margin-top: 10px "><strong>世平集团基于 NXP 的汽车调频 PKE 无钥匙门禁系统解决方案 P16-062</strong></h5>
                                <p class="card-text text-secondary">Some example text some example text. John Doe is an architect and engineer</p>
                                <a href="../HTML/Consumer/all.html" class="text-secondary  btn btn-sm" style="padding-left: 0px">consumer2</a>
                                <a href="#" class="text-secondary  btn btn-sm">评论</a>
                                <a href="#" class="text-secondary  btn btn-sm ">收藏</a>
                                <a href="#" class="text-secondary  btn btn-sm ">分享</a>
                            </div>
                            <div class="col-3">
                                <img class="img-fluid" src="../Picture/consumer.png" alt="Card image" style=" float: right;width: 126px;;height: 125px"> 
                            </div>
                        </div>
                    </li>
                    </div>

                    <!-- 第五行 放分页-->
                    <div class="col text-center" style="margin-top: 25px">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-center">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                                </li>
                                <li class="page-item  active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">2</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">3</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>            
                </div>
            </div>

        </div>
    </div>

    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>